<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
      <style>
          *{margin: 0; padding: 0}
          body{ color: red;margin: 0 }
          h1,h2,h3,h4,h5,h6{font-weight: normal;}
          #tuoche{ margin-top: -5px}
          #tuoche .tuoche_list{height:100px; margin-bottom: 5px; }
          #tuoche .tuoche_list .tou{ width: 58px; height: 58px; padding: 20px 15px; float:  left;}
          #tuoche .tuoche_list .tou img{width: 58px; height: 58px;border-radius: 50%;}
          #tuoche .cont{ float: left; margin-top: 30px}
          #tuoche .cont .cont_top{ height: 13px}
          #tuoche .cont .cont_top h4{ float: left;color: #333333;display: inline-block;margin-right: 8px;}
    #tuoche .cont .cont_top img{ vertical-align: middle;width:50px; height: 13px;display: inline-block;}
          #tuoche .cont h5{ color: #999999; margin-top: 20px;}
          #tuoche .right{ float: right;padding-top: 35px; margin-right: 16px}
          #tuoche .right h5{ color: #FFF;  padding:3px; font-size: 8px;  background: #999999; border-radius: 5px}
          #tuoche .tuoche_list .heng{width: 100%;height: 5px; background:#F5F5F5; float: left; }
      </style>
  </head>
  <body>
        <div id="tuoche" style="display:none">
              <div class="tuoche_list" v-for="site in tuoche" @click="tuoche_show(site.id)">
                    <div class="tou">
                        <img :src="site.img" alt="">
                    </div>
                    <div class="cont">
                      <div class="cont_top">
                        <h4>{{site.title==""?"未命名":site.title}}</h4>
                        <!-- v-if='site.xiaoxi' -->
                <img src="../../image/renzheng.png"  v-if="site.ren">
                      </div>
                        <h5><span>{{site.dizhi==""?"未填写地区":site.dizhi}}</span>&nbsp;&nbsp;&nbsp;<span>距离{{site.juli}}KM</span></h5>
                    </div>

                    <div class="heng"></div>
              </div>
        </div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript">
      apiready = function(){
        tuochea = new Vue({
                   el: '#tuoche',
                          data: $tools.getdata(),
           });
           $tools.datarefresh(tuochea);
        //监听筛选
        api.addEventListener({
            name: 'xinxisaixuan'
          }, function(ret, err) {
                  diqu =  ret.value.diqu;
                juli =  ret.value.juli;

            ajax();
          //  console.log(JSON.stringify(ret));
          });
          ajax();
      //Vue




      api.showProgress({
          style: 'default',
          animationType: 'fade',
          title: '努力加载中...',
          text: '先喝杯茶...',
          modal: false
      });


      };
var tuochea;
var diqu="";
var juli="";



      function tuoche_show(id){
        var member = $api.getStorage("member");
      console.log(id);
      if(member==null){
      api.openWin({
          name: 'login',
          url: 'widget://html/person/login_win.html',
            slidBackEnabled: false,
          pageParam: {
              name: 'test'
          }
      });

    }else{
        api.openWin({
            name: 'show_zhfw',
            url: 'widget://html/zhfw/show_zhfw_win.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },animation:{
              type:"push",                //动画类型（详见动画类型常量）
                subType:"from_right",       //动画子类型（详见动画子类型常量）
                duration:500                //动画过渡时间，默认300毫秒

            },
            pageParam: {
                id: id
            },
            bounces: false,
            bgColor: 'rgba(0,0,0,0)',

        });
          }
      }



      function ajax(){
        api.ajax({
            url: $api.getStorage("backapi")+'/index.php?s=zonghe&c=home&m=list_ajax&type=拖车&uid='+$api.getStorage("member"),
            method: 'post',
            data: {
                values: {
                    juli:juli,
                    diqu:diqu,
                }
            }
        },function(ret, err){
            if (ret) {
              if(diqu==""){
                tuochea.tuoche = ret.status;
                  $tools.setData("tuoche",ret.status);
              //  console.log(11111);
              }else{
                diquasc(ret)
                //  console.log(2222222);
              }
              $api.css($api.byId("tuoche"),"display:block")
              api.refreshHeaderLoadDone();
              api.hideProgress();
              //  console.log( JSON.stringify( ret ) );

            } else {
                console.log( JSON.stringify( err ) );
            }
        });

      }



      function diquasc(data){
        var arr = [];
      //  console.log(2);
          for (var i = 0; i < data.status.length; i++) {
                //console.log(JSON.stringify(data.status[i].dizhi));
                var ddd = data.status[i].dizhi
                if(ddd.indexOf(diqu) != -1){
                    arr.push(data.status[i])
                }
          }

              tuochea.tuoche =arr
      }
  </script>
  </html>
